"use strict";
import * as React from 'react';
import MyText from "../../component/MyText";
import { commonProps, commonStyles } from "../../assets/styles/common";
const { View, ScrollView, Linking, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import NavBackButton from "../../component/BackButton";
import { orderDetailProducts } from "../../assets/data";
import Colors from "../../assets/styles/Colors";
import MyIcon from "../../component/icon";
import Line from "../../component/Line";
import ProductItem from "../../component/ProductItem";
const SimpleIcon = require('react-native-vector-icons/SimpleLineIcons').default;
class OrderDetailPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.callRider = (phone) => {
            const url = `tel:${phone}`;
            Linking.canOpenURL(url).then(supported => {
                if (!supported) {
                    console.log('Can\'t handle url: ' + url);
                }
                else {
                    return Linking.openURL(url);
                }
            }).catch(err => console.error('An error occurred', err));
        };
        this.renderRider = () => {
            const { orderItem } = this.props;
            if (orderItem.get_big.get_rider) {
                return (<View style={{ marginTop: 10 }}>
                    <View style={[commonStyles.flexRow, { backgroundColor: Colors.White, padding: 10 }]}>
                        <MyText>{`骑手姓名：${orderItem.get_big.get_rider.username}`}</MyText>
                    </View>
                    <Line />
                    <TouchableOpacity style={[commonStyles.flexRow, { backgroundColor: Colors.White, padding: 10, justifyContent: 'space-between' }]} onPress={this.callRider.bind(this, orderItem.get_big.get_rider.phone)}>
                        <MyText>{`骑手联系方式：${orderItem.get_big.get_rider.phone}`}</MyText>
                        <SimpleIcon name={'arrow-right'} color={'#333'} size={14}/>
                    </TouchableOpacity>
                </View>);
            }
            else {
                return null;
            }
        };
    }
    componentDidMount() {
    }
    render() {
        const { orderItem } = this.props;
        console.log('订单详情', orderItem);
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} leftButton={<NavBackButton />} title={{ title: '订单详情', tintColor: '#fff' }}/>
                <View style={commonStyles.flex1}>
                    <ScrollView>
                        <View style={{ backgroundColor: Colors.White, padding: 15 }}>
                            
                            <MyText numberOfLines={1} color={Colors.Black} fontSize={20}>{orderItem.get_adder.accepter}<MyText numberOfLines={1} fontSize={14}>{orderItem.get_adder.telphone}</MyText></MyText>
                            
                            <MyText numberOfLines={0}>{`地址：${orderItem.get_adder.address}${orderItem.get_adder.address_detail}`}</MyText>
                        </View>
                        <View style={[commonStyles.flexRow, {
                backgroundColor: Colors.BgColor,
                padding: 10,
                alignItems: 'center',
                marginTop: 10
            }]}>
                            <MyIcon name={'icon-shop'} color={Colors.Primary}/>
                            <MyText style={{ marginLeft: 10 }}>{this.props.auth.profile.store_name}</MyText>
                        </View>

                        {orderItem.get_order_info.map((item, index) => (<View key={index}>
                                
                                <ProductItem {...item}/>
                                {index === orderDetailProducts.length - 1 ? null :
            <Line height={10} color={Colors.White}/>}
                            </View>))}
                        <Line />
                        <View style={[commonStyles.flexRow, {
                backgroundColor: Colors.White,
                padding: 10,
                justifyContent: 'space-between',
                marginTop: 10
            }]}>
                            <MyText>订单总价</MyText>
                            <MyText color={Colors.Active}>¥<MyText color={Colors.Active}>{Number(orderItem.totalprice).toFixed(2)}</MyText></MyText>
                        </View>
                        <Line />
                        {this.renderRider()}
                        <View style={[commonStyles.flexRow, { backgroundColor: Colors.White, padding: 10, marginTop: 10 }]}>
                            <MyText>{`买家留言：${orderItem.get_big ? orderItem.get_big.leaving_message : ''}`}</MyText>
                        </View>
                        <Line />
                        <View style={[commonStyles.flexRow, { backgroundColor: Colors.White, padding: 10 }]}>
                            <MyText>{`订单编号：${orderItem.order_number}`}</MyText>
                        </View>
                        <View style={[commonStyles.flexRow, { backgroundColor: Colors.White, padding: 10, }]}>
                            <MyText>{`下单时间：${orderItem.created_at}`}</MyText>
                        </View>
                        <Line />
                        
                        
                        
                    </ScrollView>
                </View>

            </View>);
    }
}
export default connect(({ auth, order }) => ({ auth, order }))(OrderDetailPage);
